<template>
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM} from 'ol/source'
    import {Tile as TileLayer} from 'ol/layer'

    export default {
        name: "TileLayer",
        data() {
            return {
                map: null
            }
        },
        mounted() {
            this.map = new Map({
                target: "map",
                layers: [
                    new TileLayer({
                        source: new OSM(),
                        zIndex: 0//图层渲染级别
                    }),
                ],
                view: new View({
                    center: [-10997148, 4569099],
                    zoom: 4,
                })
            })
        }
    }
</script>

<style scoped>

</style>